import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:wu_you/res/colors.dart';
import 'package:toast/toast.dart';

class PayDialog extends StatefulWidget {
  @override
  _PayDialogState createState() => _PayDialogState();
}

class _PayDialogState extends State<PayDialog> {
  final List<String> password = [];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox.fromSize(
          size: Size.fromHeight(48),
          child: Stack(
            alignment: AlignmentDirectional.centerStart,
            children: [
              IconButton(
                icon: Icon(
                  Icons.cancel,
                  color: AppColors.textHintColor,
                ),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
              Center(
                child: Text(
                  "请输入交易密码",
                  style: TextStyle(fontSize: 16, color: AppColors.textColor),
                ),
              ),
            ],
          ),
        ),
        Divider(
          height: 1,
        ),
        SizedBox.fromSize(
          size: Size.fromHeight(96),
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Container(
              padding: EdgeInsets.only(left: 16, right: 16),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(4)),
                border: Border.all(
                  color: Colors.grey[600],
                  width: 1,
                ),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: _buildPassword(),
              ),
            ),
          ),
        ),
        // SizedBox.fromSize(
        //   size: Size.fromHeight(40),
        //   child: Row(
        //     mainAxisAlignment: MainAxisAlignment.end,
        //     children: [
        //       TextButton(
        //           onPressed: () { NavigatorUtil.navigateToPage(context, ModifyTradePasswordPage());},
        //           child: Text(
        //             "忘记密码?",
        //           )),
        //     ],
        //   ),
        // ),
        Expanded(
          child: GridView.count(
            crossAxisCount: 3,
            childAspectRatio: 2.8,
            children: [
              TextButton(
                  onPressed: () {
                    _onNumberPressed("1");
                  },
                  child: Text("1", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
              TextButton(
                  onPressed: () {
                    _onNumberPressed("2");
                  },
                  child: Text("2", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
              TextButton(
                  onPressed: () {
                    _onNumberPressed("3");
                  },
                  child: Text("3", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
              TextButton(
                  onPressed: () {
                    _onNumberPressed("4");
                  },
                  child: Text("4", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
              TextButton(
                  onPressed: () {
                    _onNumberPressed("5");
                  },
                  child: Text("5", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
              TextButton(
                  onPressed: () {
                    _onNumberPressed("6");
                  },
                  child: Text("6", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
              TextButton(
                  onPressed: () {
                    _onNumberPressed("7");
                  },
                  child: Text("7", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
              TextButton(
                  onPressed: () {
                    _onNumberPressed("8");
                  },
                  child: Text("8", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
              TextButton(
                  onPressed: () {
                    _onNumberPressed("9");
                  },
                  child: Text("9", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
              Text(""),
              TextButton(
                  onPressed: () {
                    _onNumberPressed("0");
                  },
                  child: Text("0", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold))),
              TextButton(
                  onPressed: () {
                    if (password.isEmpty) {
                      return;
                    }
                    setState(() {
                      password.removeLast();
                    });
                  },
                  child: Icon(Icons.backspace_rounded)),
            ],
          ),
        ),
      ],
    );
  }

  _onNumberPressed(String number) {
    setState(() {
      password.add(number);
      if (password.length == 6) {
        Navigator.of(context).pop(_toPasswordString());
      }
    });
  }

  List<Widget> _buildPassword() {
    List<Widget> result = [];
    password.forEach((element) {
      result.add(Text("*", style: TextStyle(color: AppColors.textColor)));
      result.add(VerticalDivider(
        width: 1,
        color: Colors.grey[600],
      ));
    });
    int surplus = 6 - password.length;
    if (password.length < 6) {
      for (var i = 0; i < surplus; i++) {
        result.add(Text(" "));
        if (i != surplus - 1) {
          result.add(VerticalDivider(width: 1, color: Colors.grey[850]));
        }
      }
    }
    return result;
  }

  String _toPasswordString() {
    StringBuffer sb = StringBuffer();
    password.forEach((element) {
      sb.write(element);
    });
    return sb.toString();
  }
}

























class PayDialog2 extends StatefulWidget {
  @override
  PayDialog2State createState() => PayDialog2State();
}

class PayDialog2State extends State<PayDialog2> {
  TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox.fromSize(
          size: Size.fromHeight(48),
          child: Stack(
            alignment: AlignmentDirectional.centerStart,
            children: [
              IconButton(
                icon: Icon(
                  Icons.cancel,
                  color: AppColors.textHintColor,
                ),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
              Center(
                child: Text(
                  "请输入密码",
                  style: TextStyle(fontSize: 16, color: AppColors.textColor),
                ),
              ),
            ],
          ),
        ),
        Divider(
          height: 1,
        ),
        TextFormField(
          style: Theme.of(context).textTheme.headline5,
          maxLines: 1,
          textAlignVertical: TextAlignVertical.center,
          textInputAction: TextInputAction.next,
          keyboardType: TextInputType.numberWithOptions(),
          autofocus: false,
          maxLength: 20,
          controller: _controller,
          textAlign: TextAlign.start,
          decoration: InputDecoration(
            fillColor: Colors.white,
            prefixIcon: Align(
              alignment: Alignment.centerLeft,
              child: Padding(
                padding: EdgeInsets.only(left: 16),
                child: Text("密码:", style: Theme.of(context).textTheme.headline5),
              ),
            ),
            prefixIconConstraints: BoxConstraints.loose(Size(96, 56)),
            filled: true,
            border: OutlineInputBorder(
              borderSide: BorderSide.none,
            ),
            errorMaxLines: 1,
            counterText: '',
            contentPadding: EdgeInsets.all(8),
            hintText: "请输入密码",
            hintStyle: Theme.of(context).textTheme.bodyText1,
          ),
        ),

        Padding(
          padding: EdgeInsets.only(left: 24, right: 24, top: 40),
          child: FlatButton(
              onPressed: () {
                if(_controller.text == ""){
                  Toast.show("请输入密码 ", context);
                  return;
                }
                print("${_controller.text}");
                Navigator.of(context).pop(_controller.text);
              },
              color: AppColors.primaryColor,
              minWidth: double.infinity,
              height: 40,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(20),
                ),
              ),
              child: Text(
                "确定",
                style: TextStyle(color: Colors.white, fontSize: 14),
              )),
        ),
      ],
    );
  }
}
